import React from 'react'
import styles from './index.module.scss'
import FilterFooter from '../FilterFooter'
import classNames from 'classnames'
import { Spring } from 'react-spring/renderprops'

class FilterMore extends React.Component {
  state = {
    // 这个数组专门用于收集用户选择的项的value
    selected: this.props.defaultValues,
  }
  cancelBtnClick() {
    this.setState({
      selected: [],
    })
  }
  submitBtnClick() {
    this.props.submit(this.state.selected)
  }
  handleMaskClick() {
    this.props.cancel()
  }
  // 处理用户点击选项时的操作
  handleSelect(value) {
    // 判断value在数组中是否存在
    let newSelected = [...this.state.selected]
    if (newSelected.includes(value)) {
      // 如果存在, 移出对应项
      newSelected = newSelected.filter((item) => item !== value)
    } else {
      // 如果不存在, 追加
      newSelected.push(value)
    }
    this.setState({
      selected: newSelected,
    })
  }

  renderItem(arr) {
    // 高亮的逻辑: 只要当前item.value在selected中存在, 就说明要高亮
    return arr.map((item) => (
      <span
        key={item.value}
        className={classNames('tag', {
          'tag-active': this.state.selected.includes(item.value),
        })}
        onClick={this.handleSelect.bind(this, item.value)}
      >
        {item.label}
      </span>
    ))
  }

  renderMask() {
    const isShow = this.props.openType === 'more'

    return (
      <Spring from={{ opacity: 0 }} to={{ opacity: isShow ? 1 : 0 }}>
        {(props) => {
          if (props.opacity === 0) return null
          return (
            <div
              style={props}
              className="mask"
              onClick={this.handleMaskClick.bind(this)}
            />
          )
        }}
      </Spring>
    )
  }

  renderContent() {
    const {
      characteristic = [],
      floor = [],
      oriented = [],
      roomType = [],
      openType,
    } = this.props

    const isShow = openType === 'more'
    // 控制的是, 显示: transform: translateX(0px) => 消失: transform: translateX(100%)

    return (
      <Spring
        from={{ transform: 'translateX(100%)' }}
        to={{ transform: isShow ? 'translateX(0px)' : 'translateX(100%)' }}
      >
        {(props) => {
          // 达到最终隐藏的位置时, 就不渲染盒子了
          if (props.transform === 'translateX(100%)') return null
          return (
            <>
              <div style={props} className="tags">
                <dl className="dl">
                  {/* tag-active */}
                  <dt className="dt">户型</dt>
                  <dd className="dd">{this.renderItem(roomType)}</dd>

                  <dt className="dt">朝向</dt>
                  <dd className="dd">{this.renderItem(oriented)}</dd>

                  <dt className="dt">楼层</dt>
                  <dd className="dd">{this.renderItem(floor)}</dd>

                  <dt className="dt">房屋亮点</dt>
                  <dd className="dd">{this.renderItem(characteristic)}</dd>
                </dl>
              </div>

              {/* 底部结构 */}
              <FilterFooter
                style={props}
                onCancel={this.cancelBtnClick.bind(this)}
                onSubmit={this.submitBtnClick.bind(this)}
                cancelText="清除"
                className="footer"
              ></FilterFooter>
            </>
          )
        }}
      </Spring>
    )
  }

  render() {
    return (
      <div className={styles['filter-more']}>
        {this.renderMask()}
        {this.renderContent()}
      </div>
    )
  }
}

export default FilterMore
